<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>proxy</title>
</head>
<body>
    <script>
        const dom=new Proxy({},{
            get(target,property){
                return function(attrs={},...children){
                    const el=document.createElement(property);
                    for(let prop of Object.keys(attrs)){
                        el.setAttribute(prop,attrs[prop]);
                    }
                    for(let child of children){
                        if(typeof child==='string'){
                            child=document.createTextNode(child);
                        }
                        el.appendChild(child);
                    }
                    return el;
                }
            }
        });
        const el = dom.div({},
        'Hello, my name is ',
        dom.a({href: '//example.com'}, 'Mark'),
        '. I like:',
        dom.ul({style:'color:red'},
            dom.li({}, 'The web'),
            dom.li({}, 'Food'),
            dom.li({}, '…actually that\'s it')
        )
        );
        document.body.appendChild(el);
    </script>
</body>
</html>